<div>
  <button mat-raised-button (click)="shuffleArray()">Shuffle array</button>
</div>

<div>
  <button mat-raised-button (click)="changeRandomNumber()">Randomize</button>
  Highlighted rows: {{randomNumber}}
</div>

<div>
  <mat-slide-toggle (change)="multiTemplateDataRows = $event.checked">
    Enable multiple data rows
  </mat-slide-toggle>
</div>

<div>
  <mat-slide-toggle (change)="useTrackByValue = $event.checked">
    Enable track by value
  </mat-slide-toggle>
</div>

<mat-card>
  <h3> MatTable </h3>

  <table mat-table style="width: 100%"
         [trackBy]="useTrackByValue ? trackByValue : undefined"
         [multiTemplateDataRows]="multiTemplateDataRows"
         [dataSource]="data">
    <!-- Data column -->
    <ng-container matColumnDef="data">
      <th mat-header-cell *matHeaderCellDef> Data </th>
      <td mat-cell *matCellDef="let data">
        {{data.value}}
      </td>
    </ng-container>

    <!-- Index column -->
    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef> Index </th>
      <td mat-cell *matCellDef="let data; let index = index">
        {{index}}
      </td>
    </ng-container>

    <!-- Data index column -->
    <ng-container matColumnDef="dataIndex">
      <th mat-header-cell *matHeaderCellDef> Data Index </th>
      <td mat-cell *matCellDef="let data; let dataIndex = dataIndex">
        {{dataIndex}}
      </td>
    </ng-container>

    <!-- Row Index column -->
    <ng-container matColumnDef="renderIndex">
      <th mat-header-cell *matHeaderCellDef> Render Index </th>
      <td mat-cell *matCellDef="let data; let renderIndex = renderIndex">
        {{renderIndex}}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>

    <tr mat-row style="background: rgba(255, 0, 0, .2);"
        *matRowDef="let data; columns: columnsToDisplay; when: whenFn"></tr>
    <tr mat-row style="background: rgba(0, 255, 0, .2);"
        *matRowDef="let data; columns: columnsToDisplay;"></tr>
  </table>
</mat-card>
